<%@include file="/WEB-INF/views/includes/taglibs.jsp"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@include file="/WEB-INF/views/includes/adminHeader.jsp"%>

<script type="text/javascript">		
var checkdayssaved = 0;
$(document).ready(
		function() {
			$('#disableDialog').dialog({
				autoOpen: false,
				width: 800,
				draggable : true,
				resizable : false,
				dialogClass : 'disableDialog',
				buttons: {
					"Add new Rule": function() {
						$('#operation').val('addARule');
						$('#addStatusRuleform').submit();
					},
					"Cancel": function() {
						$(this).dialog("close");
					}
				}
			});
			$('#editFilterRuleDialog').dialog({
				autoOpen: false,
				width: 800,
				draggable : true,
				resizable : false,
				dialogClass : 'disableDialog',
				buttons: {
					"Save": function() {
						$('#operation2').val('editARule');
						$('#editARuleform').submit();
					},
					"Cancel": function() {
						$(this).dialog("close");
					}
				}
			});
			if ($('#newRuleEffectDays').val() != 0) {
				checkdayssaved = 1;
			}
		});
		
		var comparatorList = '';
		<c:forEach items="${comparatorList}" var="comparator">
		comparatorList = comparatorList + '<option value="${comparator}">${comparator}</option>';
		</c:forEach>
		var fieldList = '';
		<c:forEach items="${functionSchemaList}" var="functionSchema">
		fieldList = fieldList + '<option value="${functionSchema.fieldName}">${functionSchema.fieldName}</option>';
		</c:forEach>
		function addCondition(blockName, condidtionIndex, dialogName) {
			var currentConditionIndex = parseInt($('#' + condidtionIndex).val());
			var staticHtml = '<tr style="width:100%;line-height:26px" id="conditionBlock' + currentConditionIndex + '">';

			staticHtml = staticHtml
			+ '<input id="statusConditionList[' + currentConditionIndex + '].ruleId" type="hidden" value="' + currentConditionIndex + '" name="statusConditionList[' + currentConditionIndex + '].ruleId">'
			+ '<td style="width:250px;"><select style="width:250px" id="statusConditionList[' + currentConditionIndex + '].fieldName" name="statusConditionList[' + currentConditionIndex + '].fieldName" autocomplete="off">'
			+ fieldList
			+ '</select></td>'
			+ '<td style="width:180px;"><select style="width:180px" id="statusConditionList[' + currentConditionIndex + '].comparator" name="statusConditionList[' + currentConditionIndex + '].comparator" autocomplete="off">'
			+ comparatorList
			+ '</select></td>'
			+ '<td style="width:140px;"><input style="width:120px" id="statusConditionList[' + currentConditionIndex + '].compareData" name="statusConditionList[' + currentConditionIndex + '].compareData" value="" type="text"></td>'
			+ '<td style="width:100px;">&nbsp;&nbsp;<a href="#" onclick="deleteCondition(' + currentConditionIndex + ', \'' + dialogName + '\')">delete</a></td>'
			+ '<input id="statusConditionList[' + currentConditionIndex + '].enabled" type="hidden" value="1" name="statusConditionList[' + currentConditionIndex + '].enabled"></tr>';
			
			//var inner = $('#newRuleRanges').html();
			//inner = inner + staticHtml;
			currentConditionIndex = currentConditionIndex + 1;
			$('#' + condidtionIndex).val(currentConditionIndex);
			$('#' + blockName).append(staticHtml);
			$('#' + dialogName).dialog('close');
			$('#' + dialogName).dialog('open');
		}
		
		function deleteCondition(condidtionId, dialogName) {
			$('#conditionBlock' + condidtionId).css("display","none");
			$('#statusConditionList\\[' + condidtionId + '\\]\\.enabled').val('0');
			$('#' + dialogName).dialog('close');
			$('#' + dialogName).dialog('open');
		}
</script>
<div id="disableDialog" title="Add new Status Rule">
	<h3>Add new Status Rule</h3>
	<form:form method="post" action="editStatusRule" id="addStatusRuleform">
		<form:input path="functionId" type="hidden"/>
		<form:input path="conditionIndex" type="hidden"/>
		<form:input path="operation" type="hidden"/>
		<div style="font-size:12px;margin-bottom:10px"><span class="label" style="width:100px">Status becomes</span><span><form:select path="newRuleStatus" autocomplete="off">
						 <form:options items="${functionStatusList}"  itemValue="id" itemLabel="name" />
					</form:select></span></div>
		<div style="font-size:12px;margin-bottom:10px"><span 
			class="label" style="width:100px">When</span><span><a 
			href="#" onclick="addCondition('newRuleRanges', 'conditionIndex', 'disableDialog')">Add condition</a>&nbsp;&nbsp;
			(Tips: the connector between conditions is 'and')</span>
		</div>
		<div style="width:700px;margin-left:10px;">
			<table style="width:100%">
				<thead>
					<tr style="background:#969696 fixed;color:#FFFFFF">
					<th style="width:230px;text-align:left">&nbsp;Field Name</th>
					<th style="width:180px;text-align:left">&nbsp;Comparator</th>
					<th style="width:140px;text-align:left">&nbsp;Value</th>
					<th style="width:100px;text-align:left">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="newRuleRanges">
				</tbody>
			</table>
		</div>
	</form:form>
	<br/>
</div>
<div id="editFilterRuleDialog" title="Edit Status Rule">

</div>
<div class="homePage ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="introduction">
<p>
<b>Introduction:</b>&nbsp;Business Exceptions -- e.g. late delivery, large amount sales, and high priority support case, etc. -- need urgent attention, <br/>Quick Action provides an alert framework to remind users on these urgent tasks thereby helps to improve operational efficiency and overall KPI. 
</p>
<p>For each function defined, you are able to setup specific alert rules based on actual business data. You can also define alert class to distinguish priorities. These exceptions are pushed to users with significance, and in a real time manner.</p>
</div>
	<div style="margin-left:10px">
		<%@include file="/WEB-INF/views/includes/messages.jsp"%>
		<h2>Edit Function Status Rule</h2>
		<form:form method="post" action="editStatusRule" id="editStatusRuleform">
		<form:input path="operation1" type="hidden"/>
		<form:input path="operationRuleId" type="hidden"/>
			<c:if test="${command.functionId == null || empty command.functionId}">
				Please select a Function. <br/>
				<form:select path="functionId" autocomplete="off">
					 <form:options items="${functionList}"  itemValue="functionID" itemLabel="label" />
				</form:select><br/><br/>
				<button type="button"
					class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
					onclick="save()">
					<span class="ui-button-text">Continue</span>
				</button>
				<script type="text/javascript">
					function save() {
						$('#editStatusRuleform').submit();
					}
					
				</script>
			</c:if>
			
			<c:if test="${command.functionId != null && not empty command.functionId}">
				Selected Function: <b>${command.functionName}</b> &nbsp;&nbsp;&nbsp;&nbsp;<a href="<c:url value='/web/editStatusRule'/>">change Function</a>
				<form:input path="functionId" type="hidden"/><br/><br/>
				<h3>Status Rules:</h3>
				<div style="font-size:12px;margin-bottom:10px"><span class="label" style="width:100px">check data of last&nbsp;</span><span><form:select path="newRuleEffectDays">
						 <form:option value="0">-not selected-</form:option>
						 <form:option value="7">7 days</form:option>
						 <form:option value="15">15 days</form:option>
						 <form:option value="30">30 days</form:option>
						 <form:option value="60">60 days</form:option>
						 <form:option value="90">90 days</form:option>
					</form:select></span>&nbsp;&nbsp;<button type="button"
						class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						onclick="saveEffectDays()">
						<span class="ui-button-text">Save</span>
				</button><font style="color:red">&nbsp;Note: please save first</font></div>
				<button type="button"
						class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						onclick="addNewRule()">
						<span class="ui-button-text">Add New Rule</span>
				</button>
				<script type="text/javascript">
						function saveEffectDays() {
							if ($('#newRuleEffectDays').val() == 0) {
								alert("Please select a valide option for 'check data of last'.");
							} else {
								$('#operation1').val('saveEffectDays');
								$('#editStatusRuleform').submit();
							}
						}
						function addNewRule() {
							if (checkdayssaved == 0) {
								alert("Please select a valide option and save it for 'check data of last'.");
							} else {
								$('#condidtionCount').val(0);
								$('#newRuleRanges').html('');
								$('#editFilterRuleDialog').html('');
								$('#disableDialog').dialog('open');
							}
						}
						function deleteRule(id) {
							$('#operation1').val('deleteRule');
							$('#operationRuleId').val(id);
							if (confirm("Are you sure to delete the rule?")) {
								$('#editStatusRuleform').submit();
							}
						}
						function loadEditFilterRuleBlock(functionId, ruleId) {
							var baseUrl = "<c:url value='/web/editStatusRuleDetail'/>";
							var ajaxurl = baseUrl + '?functionId=' + functionId + "&ruleId=" + ruleId;
							$.ajax({
								  url: ajaxurl,
								  success: function(data) {
									$('#newRuleRanges').html('');
								    $('#editFilterRuleDialog').html('');
								    $('#editFilterRuleDialog').html(data);
								    $('#editFilterRuleDialog').dialog('open');
								  }
							});
						}
					</script>
				<c:if test="${not empty command.statusRules}">
						<c:forEach items="${command.statusRules}" var="oneStatusRule">
							<div class="ruleBolck">
								Status: <b>${oneStatusRule.statusName }</b> &nbsp;
								Conditions: <b>${oneStatusRule.contentDisplay }</b> &nbsp;
								<a href="#" onclick="loadEditFilterRuleBlock('${command.functionId}', '${oneStatusRule.ruleId}')">Edit</a>&nbsp;&nbsp;<a href="#" onclick="deleteRule('${oneStatusRule.ruleId }')">Delete</a>
							</div>
						</c:forEach>

				</c:if>
				
			</c:if>
		</form:form>
		<div style="height:1px;width:740px;"></div>
	</div>
</div>

<%@include file="/WEB-INF/views/includes/adminfooter.jsp"%>